Webfonts API #37140

aristath · 2021-12-06T08:14:05Z

Description

This is an alternative to #36394, backporting the API from WordPress/wordpress-develop#1736.
That patch was thoroughly discussed with core & theme developers and approved by core committers (@felixarntz, @hellofromtonya, @SergeyBiryukov), but the API was not merged in core on time for WP 5.9.
It was deemed a better choice to port the API to Gutenberg, where it can be implemented for theme.json and the font-family pickers (see comment on https://core.trac.wordpress.org/ticket/46370#comment:111)

The difference between this PR and #36394 is that this one removes the registry, controller, validator & provider implementations, simplifying the code structure, addressing all feedback from the initial PR, and making it easier to merge in WordPress.

The user-facing functions are exactly the same.

How has this been tested?

PHPUnit tests
Added a webfont in theme.json and confirmed that everything works as expected.
Added a webfont in functions.php and confirmed that it works as expected.

Testing a webfont loaded via `theme.json`:

In the twentytwentytwo theme, edit its theme.json file and replace fontFamilies with the following:

			"fontFamilies": [
				{
					"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
					"name": "System Font",
					"slug": "system-font"
				},
				{
					"fontFamily": "\"Source Serif Pero\", serif",
					"name": "Source Serif Pero",
					"slug": "source-serif-pero",
					"fontFace": [
						{
							"fontFamily": "Source Serif Pero",
							"fontWeight": "200 900",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/SourceSerif4Variable-Roman.ttf.woff2" ]
						},
						{
							"fontFamily": "Source Serif Pero",
							"fontWeight": "200 900",
							"fontStyle": "italic",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/SourceSerif4Variable-Italic.ttf.woff2" ]
						}
					]
				}
			],

Then, in functions.php replace the twentytwentytwo_get_font_face_styles function with this:

function twentytwentytwo_get_font_face_styles() { return ''; }

The above will test the font-family registration using theme.json.

Next, to test the PHP registration using the wp_register_webfonts function, in functions.php add the following:

add_action( 'after_setup_theme', function() {
	if ( ! function_exists( 'wp_register_webfonts' ) ) {
		return;
	}
	wp_register_webfonts(
		array(
			array(
				'font-family'  => 'Random Font Name',
				'font-weight'  => '200 900',
				'font-style'   => 'normal',
				'font-stretch' => 'normal',
				'src'          => array( 'file:./assets/fonts/SourceSerif4Variable-Roman.ttf.woff2' ),
			),
			array(
				'font-family'  => 'Random Font Name',
				'font-weight'  => '200 900',
				'font-style'   => 'italic',
				'font-stretch' => 'normal',
				'src'          => array( 'file:./assets/fonts/SourceSerif4Variable-Italic.ttf.woff2' ),
			),
		)
	);
} );

The expected result is this:

The webfont gets properly loaded in the frontend and editor
The Source Serif Pero font is available in site editor -> global-styles -> typography
The Random Font Name font is available in the font-family picker too

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
I've tested my changes with keyboard and screen readers.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

lib/compat/wordpress-5.9/class-wp-theme-json-resolver-gutenberg.php

lib/global-styles.php

lib/class-wp-webfonts.php

azaozz · 2021-12-07T23:04:00Z

This is an alternative to #36394.

Yes, this is simpler and imho looks quite better. Still unsure about having the provider in separate files/classes but that's not a big deal.

oandregal · 2022-02-08T19:38:41Z

I've pushed some changes to the theme.json classes. This PR depends on #38625

To test this, you need to have #38625 locally and do git merge --squash update/extend-theme-json. Updated the testing instructions in the issue description as well.

oandregal · 2022-02-09T09:42:55Z

I've just merged #38625 so this needs a rebase to get those changes in.

aristath · 2022-02-28T12:54:45Z

Feedback was addressed
Tests pass successfully
There are 2 ✅ already here

I think it's time we merge this PR, so I'll go ahead and do that. This API is something that we need for WP 6.0, so delaying it more will only result in blocking other PRs and features that depend on this.

We can create follow-up PRs for improvements and additions, but merging this will allow us to start using the API and iterate further as we go 👍

see #37140

… inheriting per WordPress version (#46750) * Backport WP_Theme_JSON_Resolver from core as it is * Substitute WP_Theme_JSON by WP_Theme_JSON_Gutenberg * Substitute WP_Theme_JSON_Data by WP_Theme_JSON_Data_Gutenberg * Rename WP_Theme_JSON_Resolver to WP_Theme_JSON_Resolver_Base The goal is to use it as base to inherit from, until we are able to remove all the children. * Make WP_Theme_JSON_Resolver_6_1 inherit from WP_Theme_JSON_Resolver_Base * 6.1: remove field already defined in base class * 6.1: remove translate, it is equal to base method * 6.1: remove get_core_data, it does not have base changes * 6.1: remove get_user_data Missed core changes and does not do anything differently from core. * 6.1: remove get_user_data_from_wp_global_styles It misses core changes and does not do anything differently. * 6.2: inherit from WP_Theme_JSON_Resolver_Base instead of 6.1 This makes the WP_Theme_JSON_Resover_6_1 class unused. * 6.1: remove class no longer in use * 6.2: deprecate theme_has_support #45380 * 6.2: substitute WP_Theme_JSON_Resolver::theme_has_support by wp_theme_has_theme_json() #45168 * 6.2: port changes to get_user_data_from_wp_global_styles #46043 * 6.2: update get_merged_data #45969 * 6.2: remove get_user_data Same code as core. There's a check for detecting whether the class is an instance of WP_Theme_JSON_Gutenberg that was not ported. This check was introduced to make sure the cache of the core class didn't interfere with the cache of the Gutenberg class, so it's no longer necessary. See #42756 * experimental: make it inherit from WP_Theme_JSON_Resolver_Base * 6.2: remove class no longer in use * experimental: delete remove_json_comments It's already part of the base class. * experimental: remove get_block_data It's already part of the base class and it didn't have the changes from core. * experimental: appearanceTools Port changes to the base class that were meant to be part of 6.1. See #43337 * experimental: port webfonts (experimental API) see #37140 * experimental: use gutenberg_get_legacy_theme_supports_for_theme_json #46112 * experimental: get_theme_data, all code is in the base class * experimental: remove empty class * Rename WP_Theme_JSON_Resolver_Base to WP_Theme_JSON_Resolver_Gutenberg * Fix lint issue: rename class-wp-theme-json-resolver.php to class-wp-theme-json-resolver-gutenberg.php * Move theme.json to unversioned lib/ * Move theme-i18n.json to unversioned lib/

aristath requested review from oandregal, spacedmonkey and TimothyBJacobs as code owners December 6, 2021 08:14

aristath mentioned this pull request Dec 6, 2021

Implementing a Webfonts API #36394

Closed

7 tasks

aristath force-pushed the add/webfonts-simplified-api branch from 3dad255 to dd7f2fb Compare December 6, 2021 09:51

oandregal reviewed Dec 7, 2021

View reviewed changes

lib/compat/wordpress-5.9/class-wp-theme-json-resolver-gutenberg.php Outdated Show resolved Hide resolved

oandregal reviewed Dec 7, 2021

View reviewed changes

lib/global-styles.php Outdated Show resolved Hide resolved

azaozz reviewed Dec 7, 2021

View reviewed changes

lib/class-wp-webfonts.php Outdated Show resolved Hide resolved

azaozz reviewed Dec 7, 2021

View reviewed changes

lib/class-wp-webfonts.php Outdated Show resolved Hide resolved

azaozz reviewed Dec 7, 2021

View reviewed changes

lib/class-wp-webfonts.php Outdated Show resolved Hide resolved

aristath force-pushed the add/webfonts-simplified-api branch from fe62866 to c5832b3 Compare December 8, 2021 07:43

aristath requested a review from oandregal December 9, 2021 08:28

oandregal mentioned this pull request Dec 10, 2021

Add filters to shortcircuit the public API of global styles #36909

Closed

aristath force-pushed the add/webfonts-simplified-api branch from c5832b3 to 98632c0 Compare December 14, 2021 07:20

aristath force-pushed the add/webfonts-simplified-api branch 2 times, most recently from b4d33af to b5f6bf0 Compare January 25, 2022 11:00

vindl requested review from jeyip, zaguiini, mattwiebe, vindl, Addison-Stavlo and creativecoder February 1, 2022 09:55

mtias mentioned this pull request Feb 4, 2022

Global Styles Typography #38534

Open

7 tasks

oandregal mentioned this pull request Feb 8, 2022

Allow child classes to use the private methods and constants #38625

Merged

oandregal force-pushed the add/webfonts-simplified-api branch from b5f6bf0 to 9caf86a Compare February 8, 2022 19:33

aristath force-pushed the add/webfonts-simplified-api branch 2 times, most recently from bf51eae to 88d49be Compare February 9, 2022 11:53

aristath changed the title ~~Simplified Webfonts API~~ Webfonts API Feb 28, 2022

aristath merged commit b6a787b into trunk Feb 28, 2022

aristath deleted the add/webfonts-simplified-api branch February 28, 2022 12:55

github-actions bot added this to the Gutenberg 12.8 milestone Feb 28, 2022

ndiego mentioned this pull request Feb 28, 2022

Package Google Font wpengine/frost#57

Closed

scruffian mentioned this pull request Mar 2, 2022

Archeo: Add fonts to theme.json Automattic/themes#5609

Merged

courtneyr-dev mentioned this pull request Mar 3, 2022

Web Fonts - Lesson Plan WordPress/Learn#401

Closed

38 tasks

zaguiini mentioned this pull request Mar 3, 2022

Webfonts API: Output only used fonts #39099

Closed

1 task

ryelle mentioned this pull request Mar 9, 2022

Local custom fonts solution for WordCamp Sites WordPress/wordcamp.org#739

Open

This was referenced Mar 15, 2022

Try: Blockbase standalone theme Automattic/themes#5660

Merged

Pendant: Global Styles: Typography Automattic/themes#5676

Closed

priethor added the Needs Dev Note Requires a developer note for a major WordPress release cycle label Mar 20, 2022

jffng mentioned this pull request Mar 21, 2022

Livro: Newsreader font is no longer loaded Automattic/themes#5705

Closed

jeyip mentioned this pull request Mar 23, 2022

Blockbase: Non default font families don't update text styling properly in Button block Automattic/themes#5734

Closed

bph assigned aristath Apr 6, 2022

bph mentioned this pull request Apr 12, 2022

Dev Notes Tracking Issue for WordPress 6.0 #39654

Closed

37 tasks

jasmussen mentioned this pull request Apr 14, 2022

Webfonts: Fix webfont loading in the Site Editor #40262

Merged

0aveRyan added the [Feature] Webfonts label Apr 15, 2022

fabiankaegy mentioned this pull request Apr 19, 2022

Add scaffold for usage of the Fonts API introduced in 6.5 10up/wp-scaffold#102

Open

jakobwiens7 mentioned this pull request Apr 19, 2022

Webfonts API outputs only the first @font-face of a theme.json defined font-family in frontend #40453

Closed

hellofromtonya mentioned this pull request Apr 20, 2022

Webfonts: Add internal-only theme.json webfonts handler - WP 6.0 stopgap #40493

Closed

alexandrebuffet mentioned this pull request May 19, 2022

[Fonts API] does not correctly handle variable fonts files in .woff2 format #41158

Closed

ramonjd mentioned this pull request Jun 7, 2022

Webfonts: increase priority of init hook to account for block reregistration #41569

Merged

oandregal added a commit that referenced this pull request Dec 22, 2022

experimental: port webfonts (experimental API)

26bf599

see #37140

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Webfonts API #37140

Webfonts API #37140

aristath commented Dec 6, 2021 •

edited

Loading

azaozz commented Dec 7, 2021 •

edited

Loading

oandregal commented Feb 8, 2022

oandregal commented Feb 9, 2022

aristath commented Feb 28, 2022

Webfonts API #37140

Webfonts API #37140

Conversation

aristath commented Dec 6, 2021 • edited Loading

Description

How has this been tested?

Testing a webfont loaded via theme.json:

Checklist:

azaozz commented Dec 7, 2021 • edited Loading

oandregal commented Feb 8, 2022

oandregal commented Feb 9, 2022

aristath commented Feb 28, 2022

aristath commented Dec 6, 2021 •

edited

Loading

Testing a webfont loaded via `theme.json`:

azaozz commented Dec 7, 2021 •

edited

Loading